<template>
    <div>
        
        <div style="padding: 20px;">
            <div style="padding-bottom: 20px;" >
                <i-button :level="'info'" @click.native="$router.push('/editor')">新增博文</i-button>
            </div>
            <records :data-list="page.records">
                <template slot="option" slot-scope="scope">
                    <el-tooltip  effect="dark" :content="scope.row.opinion" placement="top">
                        <div class="text-display-a-line" style="font-size: 12px;color: red;height: 40px;line-height: 40px;width: 150px;" v-if="scope.row.status == 2">
                        审核不通过:{{scope.row.opinion}} 
                        </div>
                    </el-tooltip>   
                   
                   <div class="records-option select-deep">
                        <el-select v-model="scope.row.authority" style="margin-right: 10px;" @change="changeAuthority(scope.row)">
                            <el-option :label="item.name" :value="parseInt(item.value)" v-for="(item,index) in authorityList" :key="index"></el-option>
                            
                        </el-select>
                        <i-button style="margin-right: 10px;" :level="'info'" @click.native="updateBlog(scope.row)">修改内容</i-button>
                        <i-button style="margin-right: 10px;" :level="'info'" @click.native="gotoBlogDetails(scope.row)">浏览博文</i-button>
                        <i-button @click.native="deleteBlog(scope.row)">删除博文</i-button>
                   </div>
                </template>
            </records>
            <div >
                <!-- 自定义分页主键 -->
                <i-page :total="page.total" :size="page.size" :current="page.current" @change-page="changePage"></i-page>
                
            </div>
        </div>
    </div>
</template>

<script>
import DataList from '@/components/plugs/data-list/DataList.vue'
import Records from '@/components/plugs/records/Records.vue'
import IPage from '@/components/plugs/i-page/IPage.vue'
import {get, post} from '@/utils/api.js'
import IButton from '@/components/plugs/i-button/IButton.vue'

export default {

    data(){
        return{
            page:{
                current:1,
                size:2,
                total:0,
                records:[]
            },
            authorityList:[],
            timer :null,

        }
    },
    methods:{
        updateBlog(row){

            this.$router.push(`/editor/${row.id}`)

        },
        gotoBlogDetails(row){
            if(row.authority === 0||row.status === 0){
                this.$message.error('私有和审核不通过的博文无法浏览');
                return;
            }
            this.$router.push(`/blog/details/${row.id}`);

        },
        changePage(pageInfo){

            // console.log('pageInfo',pageInfo);
            this.page.current = pageInfo.current;
            this.page.size = pageInfo.size;
            this.getBlogPage();
            document.documentElement.scrollTop = 0;
        },
        getBlogPage(){
            const promise = get({
                url:'/base-blog/front/blog/page',
                params:{
                    current:this.page.current,
                    size:this.page.size
                }
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.page = res.data;
                }
            })

        },
        getBlogAuthoritylist(){
            const promise = get({
                url:'/base-system/dict/load-by-code',
                params:{
                    code:'blog_authority'
                }
            },false);

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.authorityList = res.data.childNode;
                }
            })
        },
        changeAuthority(row){
            clearTimeout(this.timer);
            this.timer = setTimeout(()=>{
                const promise = post({
                    url:'/base-blog/front/blog/change/authority',
                    data:{id:row.id,authority:row.authority}
                });
                promise.then(res=>{
                    if(res){
                        if(res.code === 200){
                            this.getBlogPage();
                            this.$message.success(res.message);
                            return;
                        }
                        this.$message.error(res.message);
                    }
                })
            },1000);
            
        },
        deleteBlog(row){
            const promise = post({
                url:'/base-blog/front/blog/delete',
                data:{id:row.id}
            });

            promise.then(res=>{
                if(res){
                    if(res.code === 200){
                        this.$message.success(res.message);
                        this.getBlogPage();
                        return;
                    }
                    this.$message.error(res.message);
                }
            })
        }
        

    },
    created(){
        this.getBlogAuthoritylist();
        this.getBlogPage();
    },
    mounted(){
       
    },
    components:{
        DataList,
        Records,
        IPage,
        IButton
    }
}
</script>

<style scoped>
/* .btn-deep-primary>>>button{
    border-radius: 0;
    background-color: #FF6900;
    color: #fff;
    font-weight: 600;
    letter-spacing: 2px;
} */
/* .select-deep>>>select{
    border-radius:0;
    border: 0;
} */
.page-main{
    display: flex;
    justify-content: space-between;
}

.records-option{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}






</style>